<template>
    <div class="detail-header">
      <img :src="bannerImg" alt="" class="banner" @click="handleClick"> 
      <div class="detail-header-center">
        <div class="info">
          <i class="iconfont tu">&#xe624;</i>
          <span>34</span>
        </div>
        <p>知音号游船</p>
      </div>
    </div>
</template>
<script>
export default {
  name: "VHead",
  props: {
    bannerImg: {
      type: String
    }
  },
  methods: {
    handleClick() {
      this.$emit("handleClick");
    }
  }
};
</script>
<style lang="scss" scoped>
@import '~@/assets/style/global.scss';

.banner {
  width: 100%;
}

.detail-header {
  position: relative;
  font-size: 20px;
  text-align: left;
  color: color(nav-head);
}
.detail-header-center {
  position: absolute;
  bottom: 50px;
  left: 40px;
}
.info {
  background: #666;
  border-radius: 15px;
  width: 70px;
  padding: 5px 10px;
  margin-bottom: 20px;
}
</style>
